<template>
  <div>
    <a-drawer
      title="项目常用电话"
      placement="right"
      :closable="true"
      :maskClosable="true"
      :visible="visible"
      width="800"
      @close="handleClose"
      :body-style="{
        paddingBottom: '80px',
      }"
    >
      <a-alert
        v-if="visibles"
        message='将展示在用户移动端的"常用电话"页面。如果项目不使用用户移动端，则无需添加。'
        type="info"
        closable
        :after-close="Closetext"
      />
      <div style="margin-top: 10px; margin-bottom: 10px">
        <a-button type="primary" @click="classificationes(0)"
          >添加分类</a-button
        >
      </div>

      <div class="mt-10 bill-table">
        <a-table
          :dataSource="billList"
          :columns="BILL_COLUMNS"
          :pagination="false"
          rowKey="id"
          :loading="billLoading"
          size="small"
          bordered
          :expandedRowKeys="expandedRowKeys"
          @expand="expandes"
        >
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key === 'status'">
              <span v-if="text == 1" style="color: #81b337">展示</span>
              <span v-else style="color: #bd3124">隐藏</span>
            </template>
            <template v-if="column.key === 'operate'">
              <div v-if="record.phone">
                <a-button
                  type="link"
                  @click="addphone(record, record.cat_id, record.id)"
                  >编辑</a-button
                >
                <a-button type="link" @click="delphone(text, record)"
                  >删除</a-button
                >
              </div>
              <div v-else>
                <a-button type="link" @click="classificationes(record.id)"
                  >编辑</a-button
                >
                <a-button type="link" @click="addphone(record, record.id, 0)"
                  >添加号码</a-button
                >
                <a-button type="link" @click="delUser(text, record)"
                  >删除</a-button
                >
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </a-drawer>

    <Addcation
      v-if="assort"
      :visible="assort"
      :village_id="id"
      :id="assort_id"
      @onCancel="asscancel"
    />

    <Addphone
      v-if="stylephone"
      :visible="stylephone"
      :village_id="id"
      :cat_id="assort_id"
      :id="phone_id"
      @onCancel="phonecancel"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  watch,
  toRefs,
  reactive,
  createVNode,
} from "vue";
import request from "../../../common/utils/request";
import { message, Modal } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  PlusCircleOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import Addphone from "./modules/AddPhoneNumber.vue";
import Addcation from "./modules/AddClassification.vue";
import utils from "@/common/utils/utils";
const BILL_COLUMNS = [
  {
    title: "分类名称",
    dataIndex: "Classification",
  },
  {
    title: "电话",
    dataIndex: "phone",
    align: "center",
    width: 160,
  },
  {
    title: "排序",
    dataIndex: "sort",
    align: "center",
    width: 70,
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    align: "center",
    width: 70,
  },
  {
    title: "操作",
    dataIndex: "operate",
    key: "operate",
    align: "center",
    width: 250,
  },
];
export default defineComponent({
  name: "ProjectDetail",
  components: {
    PlusCircleOutlined,
    QuestionCircleOutlined,
    Addcation,
    Addphone,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    const state = reactive({
      billList: [],
      visibles: true,
      assort: false,
      assort_id: 0,
      billLoading: false,
      stylephone: false,
      phone_id: 0,
      expandedRowKeys: [],
    });

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
          state.expandedRowKeys = [];
        }
      }
    );

    const init = () => {
      getDetail();
    };

    const getDetail = () => {
      state.billLoading = true;
      request
        .get("/village", "/org/village/phone/category", {
          village_id: props.id,
        })
        .then((res) => {
          state.billList = [];
          for (let i = 0; i < res.list.length; i++) {
            if (res.list[i].phone_list && res.list[i].phone_list.length > 0) {
              let list = [];
              for (let j = 0; j < res.list[i].phone_list.length; j++) {
                list.push({
                  id: res.list[i].phone_list[j].id,
                  Classification: res.list[i].phone_list[j].phone_name,
                  phone: res.list[i].phone_list[j].phone,
                  sort: res.list[i].phone_list[j].sort,
                  status: res.list[i].phone_list[j].status,
                  cat_id: res.list[i].id,
                });
              }

              state.billList.push({
                id: res.list[i].id,
                Classification: res.list[i].cat_name,
                phone: "",
                sort: res.list[i].sort,
                status: res.list[i].status,
                children: list,
              });
            } else {
              state.billList.push({
                id: res.list[i].id,
                Classification: res.list[i].cat_name,
                phone: "",
                sort: res.list[i].sort,
                status: res.list[i].status,
              });
            }
          }
          state.billLoading = false;
        })
        .finally(() => {
          state.billLoading = false;
        });
    };

    const handleClose = () => {
      context.emit("cancel");
    };

    const Closetext = () => {
      state.visibles = false;
    };

    const classificationes = (id) => {
      state.assort_id = id;
      state.assort = true;
    };

    const asscancel = (e) => {
      if (e == "ok") {
        getDetail();
      }
      state.assort = false;
    };

    const addphone = (item, cat_id, id) => {
      state.assort_id = cat_id;
      state.phone_id = id;
      state.stylephone = true;
    };

    const phonecancel = (e) => {
      if (e == "ok") {
        getDetail();
      }
      state.stylephone = false;
    };

    const expandes = (e, record) => {
      if (e) {
        state.expandedRowKeys.push(record.id);
      } else {
        state.expandedRowKeys.splice(
          state.expandedRowKeys.indexOf(record.id),
          1
        );
      }
    };

    const delUser = (text, record) => {
      utils.modalConfirm({
        content: `确认删除该分组吗？`,
        okType: "danger",
        onOk: () => {
          request
            .del("/village", `/org/village/phone/category/${record.id}`)
            .then((res) => {
              message.success("删除成功");
              getDetail();
            });
        },
      });
    };

    const delphone = (text, record) => {
      utils.modalConfirm({
        content: `确认删除该手机号吗？`,
        okType: "danger",
        onOk: () => {
          request
            .del("/village", `/org/village/phone/${record.id}`)
            .then((res) => {
              message.success("删除成功");
              getDetail();
            });
        },
      });
    };

    return {
      BILL_COLUMNS,
      ...toRefs(state),
      handleClose,
      Closetext,
      getDetail,
      classificationes,
      asscancel,
      delUser,
      addphone,
      phonecancel,
      delphone,
      expandes,
    };
  },
});
</script>

<style lang="less" scoped>
.desc-table {
  margin-top: 10px;
  :deep(.ant-descriptions-view table) {
    table-layout: fixed;
  }
}
</style>
